<template>
<!--  <van-dialog-->
<!--    use-slot-->
<!--    :title="title"-->
<!--    :show="show"-->
<!--    show-cancel-button-->

<!--    @close="onClose"-->
<!--    @confirm="getUserInfo"-->
<!--  >-->
<!--    <input type="text" placeholder="请输入手机号" class="teleStyle" :value="phoneNumber" @change='synchroValue'>-->
<!--  </van-dialog>-->
  <div>
    <van-cell title="展示弹出层" is-link @click="showPopup" />

    <van-popup :show="show" round  position="bottom" @close="onClose">
      <div class="weui-cells weui-cells_form" style="padding: 35rpx;">
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">分类名称:</label></div>
        <div class="weui-cell__bd">
          <input id="js_input" class="weui-input" placeholder="输入分类名称" v-model.lazy="phoneNumber">
        </div>
      </div>
      </div>
<!--      <input type="text" placeholder="请输入手机号" class="teleStyle" v-model.lazy="phoneNumber">-->
      <button   class="weui-btn weui-btn_primary" @click="getUserInfo" :disabled="!phoneNumber">保存</button>
    </van-popup>
  </div>
</template>

<script>
  export default{
    name: '',
    data () {
      return {
        show: false,
        phoneNumber: '',
        title: '',
        pid: '',
        id: '',
        typename: '',
        item: {}
      }
    },
    onLoad (id) {
      this.id = id.id
    },
    methods: {
        showPopup() {

            this.show=false;
        },

        onClose() {
            this.show=false;
        },
        synchroValue(e){
           // console.log(e)
         this.phoneNumber=e.mp.detail.value;
        },
      init (name, pid, item) {
        if (item) {
          this.phoneNumber = item.simplename
          this.item = item
        }
        this.title = name
        this.show = true
        if (!pid) {
          this.pid = '0'
        } else {
          this.pid = pid
        }
       // console.log(this.show)
      },
      getUserInfo () {
        let that = this
      //  console.log(this.phoneNumber)
        if (!this.phoneNumber) {
          wx.showToast({
            title: '请输入分类名称',
            icon: 'none',
            duration: 2000

          })
        }
        if (JSON.stringify(this.item) == '{}') { // 添加
          this.$http.request({
            method: 'post',
            url: '/api/category/add',
            body: {
              simplename: that.phoneNumber,
              cardId: that.id,
              pid: this.pid
            }
          }).then((data) => {
            if (data.code == 200) {
              wx.showToast({
                title: '添加成功',
                icon: 'success',
                duration: 2000,
                success: () => {
                  that.$emit('changeDom')
                  that.phoneNumber="";
                  that.show=false;
                }
              })
            } else {
                that.phoneNumber="";
              wx.showToast({
                title: `${data.message}`,
                icon: 'none'
              })
            }
          }).catch((err)=>{
              that.phoneNumber="";
          })
        } else {
          this.updateItem(this.item)
        }
      },
      updateItem (item) {
        let that = this

        this.$http.request({
          method: 'post',
          url: '/api/category/update',
          body: {
            cardId: this.id,
            simplename: this.phoneNumber,
            id: item.id
          }
        }).then((data) => {
          if (data.code == 200) {
            wx.showToast({
              title: '修改成功',
              icon: 'success',
              duration: 2000,
              success: () => {
                that.$emit('changeDom')
              }
            })
          } else {
            wx.showToast({
              title: `${data.message}`,
              icon: 'none'
            })
          }
        })
      },
      onClose () {
        this.show = false
      }
    }
  }
</script>

<style scoped>
  .teleStyle{
    width: 80%;
    margin:30rpx auto;
    background: #FFFFFF;
    border: 1px solid #979797;
    border-radius: 6px;
    box-sizing: border-box;
    padding-left: 12rpx;
    font-size: 28rpx;
    /*color: rgba(0,0,0,0.25);*/

  }
</style>
